<template>
  <div style="position:relative;">
    <el-input
      :value="inputValue"
      placeholder="请输入内容"
      @input="onInputChange"
      class="input-container"
      clearable
    ></el-input>
    <div
      v-html="showValue"
      class="show-input"
    ></div>
    <div
      class="mention-select-container"
      v-if="isMentionsVisble"
    >

      <el-cascader-panel
        :options="options"
        :show-all-levels="false"
        @change="onMentionChange"
      />
    </div>
  </div>
</template>

<script>
import { Input,CascaderPanel } from "element-ui";
export default {
  watch: {
    inputValue: {
      immediate: true,
      handler(value = '') {
        this.$emit("change", value);
        this.showValue = value.replace(/\{([\s\S]+?)\}/g, (_, text) => {
          return this.getMentionWrapper(text)(text);
        });
      },
    },
    value: {
      immediate: true,
      handler(value) {
        this.inputValue = value;
      },
    },
  },
  components: {
    'el-input': Input,
    'el-cascader-panel': CascaderPanel
  },
  data() {
    return {
      isMentionsVisble: false,
      inputValue: "",
      showValue: "",
      options: [
        {
          label: "接口返回",
          value: "$res",
          children: [
            {
              label: "第一项",
              value: "1",
            },
            {
              label: "第二项",
              value: "2",
            },
            {
              label: "第三项",
              value: "3",
            },
            {
              label: "第四项",
              value: "4",
            },
          ],
        },
        {
          label: "表单值",
          value: "$form",
          children: [
            {
              label: "第一项",
              value: "1",
            },
            {
              label: "第二项",
              value: "2",
            },
            {
              label: "第三项",
              value: "3",
            },
            {
              label: "第四项",
              value: "4",
            },
          ],
        },
      ],
    };
  },
  props: {
    value: {
      type: String,
    },
  },
  methods: {
    getMentionWrapper(type) {
      const className = type.startsWith("$res")
        ? "mention-res"
        : "mention-form";
      return (text) => `<span class="mention ${className}">${text}</span>`;
    },
    showMentions(value) {
      if (value.endsWith("@")) {
        return true;
      }
    },
    onInputChange(value) {
      this.inputValue = value;
      this.isMentionsVisble = Boolean(this.showMentions(value));
    },
    onMentionChange([type, index]) {
      const selected = `{${type}${index}}`;
      this.isMentionsVisble = false;
      this.inputValue = `${this.inputValue.slice(0, -1)}${selected}`;
    },
  },
};
</script>

<style scoped>
.mention-select-container {
  /* position: absolute; */
  bottom: -200px;
  left: 0;
  background: #fff;
}
.show-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
<style>
.input-container .el-input__inner {
  color: transparent !important;
}
.mention {
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  padding: 0 6px;
  font-size: 12px;
  margin: 0 2px;
  color: #fff;
  cursor: pointer;
}
.mention-res {
  background: #e6a23c;
}

.mention-form {
  background: #67c23a;
}
</style>